<template>
	<el-row :gutter='20'>
		<el-col :span='4'>
			<div class="user_left">
				<div class="user_lable">
					选择组织
				</div>
				<div class="user_leftitem" v-for="(item,index) in depts" :class="{'active':item.id == userselect}" @click="selectUser(item)">
					{{item.name}}
				</div>
			</div>
		</el-col>
		<el-col :span='20'>
			<div class="main-wrapper">
				<!-- 专业类别筛选 -->
				<div class="content-filterbox">
					<div class="content-filter">
						<div class="content-filtername">专业：</div>
						<div v-for="(item, index) in majors" :key="`major${index}`" class="content-filteritem" :class="`${ item.id === currentMajor.id ? 'active' : ''}`" @click="handleMajorChange(item)">{{ item.name }}</div>
					</div>
					<div class="content-filter">
						<div class="content-filtername">分类：</div>
						<div class="content-filteritem" v-show="!loadingData">请选择专业</div>
						<div v-for="(item, index) in currentMajor.children" :key="`type${index}`" class="content-filteritem" :class="`${ item.id === currentType.id ? 'active' : ''}`" @click="handleTypeChange(item)">{{ item.name }}</div>
					</div>
				</div>
				<!-- 搜索栏 -->
				<div class="search-wrapper">
					<el-form :inline="true" :model="params" class="demo-form-inline">
						<el-form-item label="实验名称">
							<el-input v-model="params.name" placeholder="实验名称" clearable />
						</el-form-item>
						<el-button type="primary" @click="resourceDetailPage()">查询</el-button>
						<el-button type="success" @click="linkAll" v-if='userselect && currentType && currentType.id'>一键关联</el-button>
					</el-form>
				</div>
				<!-- 仿真实验列表 -->
				<div class="page-wrapper">
					<el-table :data="resources" border @select-all='selectionAllChange' @select='selectionChange' row-key="vrResourceDetailId" ref='sourceList'>
						<div slot="empty" v-show='!loadingData'>
							<span style="color: #1482F0;font-size: 16px;">
						<i class="iconfont iconwushuju" style="font-size: 22px;"></i>&nbsp;&nbsp;请选择专业
					</span>
						</div>
						<div slot="empty" v-show='loadingData'>
							<span style="color: #1482F0;font-size: 16px;">
						<i class="iconfont iconwushuju" style="font-size: 22px;"></i>&nbsp;&nbsp;暂无数据
					</span>
						</div>
						<el-table-column align='center' type="selection" :reserve-selection='true' />
						<el-table-column prop="name" label="实验名称" align='center' show-overflow-tooltip />
						<el-table-column prop="majorName" label="专业" align='center' />
						<el-table-column prop="updateTime" label="更新时间" width="155" align='center' />
						<el-table-column prop="vrExamineState" label="考核模式状态" width="130" align='center'>
							<template slot-scope="scope">
								<el-tag :type="scope.row.vrExamineState=='1'?'success':'info'">{{scope.row.vrExamineState=="1"?"正常":"禁用"}}</el-tag>
							</template>
						</el-table-column>
					</el-table>
					<div style="width: 100%;margin: 15px;text-align: center;">
						<el-pagination background @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="20" layout="total, prev, pager, next" :total="pageInfo.total"></el-pagination>
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import { majorList } from '@/api/major.js'
	import { deptTree } from '@/api/dept.js'
	import { resourceDetailPage } from '@/api/resource.js'
//	import { resourceDetailPower, vrResourceDetailIdList, resourceDetailPowerAll } from "@/api/vrResourceDetailDept.js";
	export default {
		data: () => ({
			params: {}, // 实验查询参数
			resources: [], // 实验资源列表
			pageInfo: {}, // 实验资源列表分页参数
			currentMajor: {}, // 当前所选专业详情
			currentType: {}, // 当前所选类别详情
			dataloading: false,
			loadingData: false,
			selections: [],
			depts: [],
			majors: [],
			userspowers: [],
			userselect: null,
			userselectname: '',
		}),
		created() {
			this.getMajorTree();
			this.getDeptList();
		},
		methods: {
			selectionAllChange(selection) {
				if(!this.userselect || this.userselect == '') {
					this.$message({
						type: 'error',
						message: '请先选择操作的组织！'
					});
					this.$refs.sourceList.clearSelection();
					return;
				}
				this.selections = selection;
				if(selection.length > 0) {
					this.resources.map(item => {
						if(!this.userspowers.includes(item.vrResourceDetailId)) {
							this.userspowers.push(item.vrResourceDetailId)
						}
					})
				} else {
					this.resources.map(item => {
						if(this.userspowers.includes(item.vrResourceDetailId)) {
							var index = this.userspowers.indexOf(item.vrResourceDetailId)
							this.userspowers.splice(index, 1)
						}
					})
				}
				var data = {
					deptId: this.userselect,
					vrDetailIds: this.userspowers
				}
				resourceDetailPower(data).then(res => {
					if(res.code != '200') {
						this.$message({
							type: 'error',
							message: res.msg
						});
					}
				})
			},
			selectionChange(selection, row) {
				if(!this.userselect || this.userselect == '') {
					this.$message({
						type: 'error',
						message: '请先选择操作的组织！'
					});
					this.$refs.sourceList.clearSelection();
					return;
				}
				this.selections = selection;
				if(this.userspowers.includes(row.vrResourceDetailId)) {
					var index = this.userspowers.indexOf(row.vrResourceDetailId)
					this.userspowers.splice(index, 1)
				} else {
					this.userspowers.push(row.vrResourceDetailId)
				}
				var data = {
					deptId: this.userselect,
					vrDetailIds: this.userspowers
				}
				resourceDetailPower(data).then(res => {
					if(res.code != '200') {
						this.$message({
							type: 'error',
							message: res.msg
						});
					}
				})
			},
			selectUser(item) {
				this.userselect = item.id;
				this.userselectname = item.name;
				this.params = {};
				this.currentType = {};
				this.currentMajor = {};
				this.pageInfo = {};
				this.resources = [];
				this.$refs.sourceList.clearSelection();
				this.selections = [];
				this.getuserPower();
			},
			getuserPower() {
				vrResourceDetailIdList({
					deptId: this.userselect
				}).then(res => {
					this.userspowers = res.data
				})
			},
			changeSelect() {
				this.$nextTick(() => {
					this.$refs.sourceList.clearSelection();
					var records = this.resources;
					var userspowers = this.userspowers;
					if(userspowers && userspowers.length > 0) {
						records.map((item, index) => {
							if(userspowers.includes(item.vrResourceDetailId)) {
								this.$nextTick(() => {
									this.$refs.sourceList.toggleRowSelection(item, true);
								})
							}
						})
					}
				})
			},
			getChildren(arrs) {
				arrs.map(item => {
					if(item.children && item.children.length > 0) {
						this.getChildren(item.children)
					} else {
						item.children = null;
					}
				})
				return arrs
			},
			getDeptList() {
				deptTree({}).then(async res => {
					if(res.code == '200') {
						var depts = this.getChildren(res.data);
						this.depts = depts;
					}
				})
			},
			resourceDetailPage() {
				if(this.currentType.id == null) {
					this.loadingData = true
				}
				this.params.majorId = this.currentMajor.id;
				resourceDetailPage(Object.assign(this.params, this.pageInfo)).then(res => {
					if(res.code == '200') {
						this.resources = res.data.list;
						this.changeSelect();
						this.pageInfo = {
							pageNum: res.data.pageNum,
							total: res.data.total,
							pageSize: res.data.pageSize
						};
						this.loading = false;
					} else {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					}
				});
			},
			getMajorTree() {
				majorList({}).then(async res => {
					this.majors = res.data
				})
			},
			// ==================== major bar ====================
			handleMajorChange(major) {
				if(this.currentMajor === major) {
					return
				}
				this.currentMajor = major;
				this.currentType = {};
				this.pageInfo.pageNum = 1;
				this.resourceDetailPage()
			},
			handleTypeChange(type) {
				if(this.currentType === type) {
					return
				}
				this.currentType = type;
				this.pageInfo.pageNum = 1;
				this.resourceDetailPage()
			},
			// ==================== pagination ====================
			handleCurrentChange(pageNum) {
				this.pageInfo.pageNum = pageNum;
				this.resourceDetailPage();
			},
			handleSizeChange(pageSize) {
				this.pageInfo.pageSize = pageSize;
				this.pageInfo.currnet = 1;
				this.resourceDetailPage();
			},
			// ==================== 一键关联 ====================
			linkAll() {
				this.$confirm('确定将【' + this.userselectname + '】一键关联当前分类下的所有实验？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					resourceDetailPowerAll({
						deptId: this.userselect,
						majorId: this.currentType.id
					}).then(async res => {
						if(res.code == '200') {
							this.$message({
								title: '提示',
								type: 'success',
								message: '操作成功!'
							});
							vrResourceDetailIdList({
								deptId: this.userselect
							}).then(res => {
								this.userspowers = res.data
								this.resourceDetailPage();
							})
						}
					})
				}).catch(() => {});
			},
		}
	}
</script>

<style>
	.main-wrapper {
		margin: 15px;
	}
	
	.content-filterbox {
		height: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 15px;
		border: 1px solid #cccccc;
		margin: 0 0 15px 0;
	}
	
	.content-filter {
		height: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 15px 0 0 60px;
		border-bottom: 1px solid #cccccc;
		position: relative;
		min-height: 60px;
	}
	
	.content-filter:last-child {
		border-bottom: none;
		margin: 0;
	}
	
	.content-filtername {
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		font-weight: 500;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.content-filteritem {
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		padding: 0 15px;
		color: #666666;
		margin: 0 15px 15px 0;
		display: inline-block;
		cursor: pointer;
		border-radius: 5px;
	}
	
	.content-filteritem.active {
		color: #ffffff;
		background: #31bc7a;
	}
	
	.search-wrapper {
		margin-bottom: 0.5rem;
	}
	/* 表单 */
	
	.cover-content {
		height: 80px;
		width: 80px;
	}
	
	.el-icon-picture-outline {
		height: 50px;
		width: 50px;
		font-size: 30px;
		text-align: center;
		line-height: 50px;
		color: #909399;
		background-color: #f5f7fa;
	}
	/* 弹出框 */
	
	.changeStyle .el-dialog__header {
		background-color: #eef1f6;
	}
	
	.changeStyle .el-dialog__title {
		color: #0b87fb;
	}
	
	.changeStyle .dialog-content {
		height: calc(100vh - 180px);
		overflow: auto;
	}
	
	.main_gutter {
		padding: 0 25px;
		box-sizing: border-box;
	}
	
	.user_lable {
		width: 100%;
		height: 40px;
		text-align: center;
		background: rgba(49, 188, 122, 0.9);
		color: #FFFFFF;
		line-height: 40px;
	}
	
	.user_left {
		width: 100%;
		height: calc(100vh - 125px);
		min-height: 400px;
		border: 1px solid #cccccc;
		margin: 15px;
		overflow-y: auto;
	}
	
	.user_leftitem {
		width: 90%;
		margin: 5px auto;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		text-indent: 1em;
		cursor: pointer;
		border-radius: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.user_leftitem.active,
	.user_leftitem:hover {
		background: #31bc7a;
		color: #FFFFFF;
	}
</style>